<template>
    <div class="footer">
        <el-row :gutter="10"
                class="footer-container">
            <el-col :span="6"
                    class="container">
                1
            </el-col>
            <div class="line"></div>
            <el-col :span="6"
                    class="container">
                2
            </el-col>
            <div class="line"></div>
            <el-col :span="6"
                    class="container">
                3
            </el-col>
            <div class="line"></div>
            <el-col :span="6"
                    class="container">
                4
            </el-col>
        </el-row>
    </div>
</template>

<style lang="less" scoped>
.footer {
    height: 100%;
    padding: 0px 5px;
    .footer-container {
        height: 95%;
        border: solid 1px #0770b2;
        box-shadow: inset 0px 0px 3px 0.3px #1b92e3;
        box-sizing: border-box;
        padding-left: 0px !important;
        padding-right: 0px !important;
        display: flex;
        .container {
            padding: 20px 10px;
        }
        .line {
            height: 80%;
            width: 1px;
            background-color: #4abbd9;
            transform: translateY(10%);
        }
    }
}
</style>